const path = require("path");
// webpack.config.js//首先引入插件
// const OptimizeCssPlugin = require("optimize-css-assets-webpack-plugin");
// const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// html-webpack-plugin 的 config - start
const isDev = process.env.NODE_ENV === "development";
const config = require("./public/config")[isDev ? "dev" : "build"];
// html-webpack-plugin 的 config - end
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const apiMocker = require("mocker-api");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
  mode: "development",
  devtool: "source-map", // 开发环境下使用
  entry: {
    index: "./src/index.js",
    login: "./src/login.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"), //必须是绝对路径
    // filename: '[name].[hash:6].js',
    filename: "[name].js",
    publicPath: "/", //通常是CDN地址
  },
  devServer: {
    port: "3000", //默认是8080
    quiet: false, //默认不启用
    inline: true, //默认开启 inline 模式，如果设置为false,开启 iframe 模式
    stats: "errors-only", //终端仅打印 error
    overlay: false, //默认不启用
    clientLogLevel: "silent", //日志等级
    compress: true, //是否启用 gzip 压缩
    hot: false,
  },
  resolve: {
    modules: ["./src", "node_modules"],
  },
  module: {
    rules: [
      {
        test: /\.(c|le)ss$/,
        use: [
          // "style-loader",
          // MiniCssExtractPlugin.loader,
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true,
            },
          },
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: function () {
                return [
                  require("autoprefixer")({
                    overrideBrowserslist: [">0.25%", "not dead"],
                  }),
                ];
              },
            },
          },
          "less-loader",
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10240, //10K
              esModule: false,
              name: "[name]_[hash:6].[ext]",
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/, //排除 node_modules 目录
        use: [
          {
            loader: "thread-loader", // 有同样配置的 loader 会共享一个 worker 池(worker pool)
            // options: {
            //   // 产生的 worker 的数量，默认是 cpu 的核心数
            //   workers: 2,
            //   // 一个 worker 进程中并行执行工作的数量
            //   // 默认为 20
            //   workerParallelJobs: 50,
            //   // 闲置时定时删除 worker 进程
            //   // 默认为 500ms
            //   // 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
            //   poolTimeout: 2000,
            //   // 池(pool)分配给 worker 的工作数量
            //   // 默认为 200
            //   // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
            //   poolParallelJobs: 50,
            //   // 池(pool)的名称
            //   // 可以修改名称来创建其余选项都一样的池(pool)
            //   name: "my-pool",
            // },
          },
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    corejs: 3,
                  },
                ],
              ],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // 不需要传参数喔，它可以找到 outputPath
    // new CleanWebpackPlugin(),
    // new OptimizeCssPlugin(),
    // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "index.html", // 打包后的文件名
      chunks: ["index"],
      config: config.template,
      minify: {
        removeAttributeQuotes: false, // 是否删除属性的双引号
        collapseWhitespace: false, // 是否折叠空白
      },
      hash: true, //是否加上hash，默认是 false
    }),
    new HtmlWebpackPlugin({
      template: "./public/test.html",
      filename: "test.html", //打包后的文件名
      chunks: ["test"],
    }),
    new HtmlWebpackPlugin({
      template: "./public/thr.html",
      filename: "thr.html", //打包后的文件名
      chunks: ["thr"],
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "public/js/*.js",
          to: path.resolve(__dirname, "dist", "js"),
          flatten: true,
        },
      ],
    }),
    // new webpack.ProvidePlugin({
    //   _map: ["lodash", "map"],
    //   Vue: ["vue/dist/vue.esm.js", "default"],
    //   $: "jquery",
    //   React: "react",
    // }),
  ],
};
